<template>
  <div class="list">
    <div class="content">
      <!--<img src={{news.image}}>-->
      <div class="consultList">
        <el-container :data="tableData2">
          <el-aside width="300px" v-for="fit in fits" :key="fit">
            <el-avatar  shape="square" :size="150" :fit="fit" :src="news.url" style="margin-top: 15px;margin-left: 125px;"></el-avatar>
          </el-aside>
          <el-main>
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                    {{news.title}}
                </div>
              </el-col>
              <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  阅读数：{{news.readNum}} &nbsp;&nbsp;&nbsp;&nbsp;评论数：{{news.reviewNum}}&nbsp;&nbsp;&nbsp;&nbsp;转发数：{{news.repostNum}}
                </div>
              </el-col>
              <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
               <!--   <el-button type="danger" plain  size="mini">置顶</el-button>-->
                  <el-button type="danger" plain  size="mini">{{news.status}}</el-button>
                </div>
              </el-col>
              <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                 {{news.author}}&nbsp;&nbsp;&nbsp;&nbsp; {{news.time}}
                </div>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  &nbsp;&nbsp;&nbsp;&nbsp;
                 <!-- <el-link type="primary">取消置顶</el-link>-->
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <el-link type="primary" @click="show">查看</el-link>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <el-link type="primary">下架链接</el-link>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <el-link type="danger">删除</el-link>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </el-container>

        <el-dialog title="添加资讯" :visible.sync="dialogVisible" width="40%">
          <el-form>
            <el-form-item label="文章标题:" :label-width="formWidth">
              <el-input autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>

            <el-form-item label="缩略图:" :label-width="formWidth">
              <el-upload
                class="upload-demo"
                action="http://oss-jing.oss-cn-chengdu.aliyuncs.com"
                :show-file-list="true"
                :data="dataObj"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                multiple
                :limit="3">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

            </el-form-item>

            <el-form-item label="来源:" :label-width="formWidth">
              <el-radio-group v-model="radio">
                <el-radio label="1" >平台原创</el-radio>
                <el-radio label="2">网络转载</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="编辑作者:" :label-width="formWidth" size="medium">
              <el-select  placeholder="Abandon健康平台原创" style="width: 575px;">
                <el-option label="Abandon健康平台原创" value=""></el-option>
                <el-option label="yanghuan" value=""></el-option>
                <el-option label="jinghao" value=""></el-option>
                <el-option label="zhuzhiying" value=""></el-option>
                <el-option label="zhenglinhui" value=""></el-option>
                <el-option label="zhaoyang" value=""></el-option>
              </el-select>
            </el-form-item>




          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>

          </div>
        </el-dialog>


      </div>

    </div>

  </div>

</template>

<script>

  import quillEditor  from "vue-quill-editor"; //调用编辑器
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import FuncFormsEdit from "../FuncFormsEdit";

  export default {
      name: "consultList",
      components: {
        quillEditor,FuncFormsEdit
      },
      data(){
        return {
          content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
          editorOption: {},
          fits: ['fill'],
          url:'',
          dialogVisible: false,
          radio: '1',
          tableData2:'',

        }
      },
      props:{
        news:Object,
      },
      methods:{
        show(){
          this.$router.push({
            path: '/main/consultDetail',
          })
        },
          created:function () {
            console.log(news.photo)
          },
        onEditorReady(editor) { // 准备编辑器

        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
      },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    }
  }



</script>

<style scoped>
  .el-header, .el-footer {
  /*  background-color: #B3C0D1;*/
    /*color: #333;*/
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: aliceblue;
    color: #333;
    text-align: center;
    line-height: 100px;
  }

  .el-main {

    background-color: aliceblue;
    /*color: #333;*/
    text-align: center;
    line-height: 100px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .list{
    /*height: 400px;*/
    border: 1px solid white;
    width: 96%;
    margin: auto;
    padding-left: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: white;
  }
  #imageBox{
    display: inline;
    /*background-color: #B3C0D1;*/
    width: 160px;
    height: 120px;
    margin-top: 34px;
    margin-left: 174px;
  }
  #listline{
    width: 80%;
    height: 140px;
    /*background-color: antiquewhite;*/
    margin-left: 115px;
  }
  #textBox{
    display: inline;
    margin-left: 30px;
    margin-top: 20px;
  }

  .el-aside {
    /*background-color: #D3DCE6;*/
    /*color: #333;*/
    text-align: center;
    line-height: 200px;
    margin-top: 20px;
  }

  .el-main {
    /*background-color: #E9EEF3;*/
   /* color: #333;*/
    text-align: left;
    line-height: 35px;
    margin-top: 20px;
  }

  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    /*background: #99a9bf;*/
  }
  .bg-purple {
   /* background: #d3dce6;*/
  }
  .bg-purple-light {
    /*background: #e5e9f2;*/
  }
  .grid-content {
    border-radius: 4px;
    min-height: 20px;
  }
  .row-bg {
    padding: 10px 0;
    /*background-color: #f9fafc;*/
  }

</style>
